<template>
  <view class="my-remark">
    <view v-for="(item,index) in remarks" :key="index">
		<remark-card
            mode="widthFix"
            :item="item"
            @addLikes="addLikes(item)"
            @addComments="addComments(item)"
		></remark-card>
     <!--  <uni-card
        :title="item.username"
        mode="title"
        :is-shadow="true"
        :thumbnail="item.icon"
        :extra="item.createTime"
        note="Tips"
      >
        美食：{{item.foodName}}<br>
        <view class="food-remark">
          <text>评分：</text>
          <uni-rate :readonly="true" size="14" :value="item.score?Number(item.score):5" />
        </view>
        坐标：{{item.schoolName+item.address}}<br>
        评价：{{item.description}}<br>
        <image :src="item.photo"></image>
        <template v-slot:footer>
            <view class="footer-box">
                <view class="icon icontubiaozhizuosvg-21">喜欢{{item.dianZanNum}}</view>
                <view class="icon icontubiaozhizuosvg-38">评论{{item.pingLunNum}}</view>
            </view>
        </template>
      </uni-card> -->
    </view>
    <view v-if="remarks.length !== 0">
      <uni-pagination
        class="my-page"
        :total="totalSize"
        :current="pageQuery.pageNum"
        :pageSize="pageQuery.pageSize"
        @change="handlePageChange"
      ></uni-pagination>
    </view>
    <view class="no-data" v-if="remarks.length === 0">
        <text>这位同学很懒，还没有发布过点评~</text>
    </view>
  </view>
</template>

<script>
import {uniCard, uniPagination, uniRate} from '@dcloudio/uni-ui'
import {getMyRemark, dianzan, notLike} from '../../api/remark'
import {mapState} from 'vuex';
import {RemarkCard} from '@/components/RemarkCard'
export default {
  name: 'my-remark',
  components: {
    uniCard, uniPagination, uniRate, RemarkCard
  },
  computed: {
    ...mapState(['userInfo'])
  },
  data() {
    return {
      totalSize: 0, // 总条数
      pageQuery: {
        pageNum: 1,
        pageSize: 10
      },
      remarks: []
    }
  },
  onLoad (options) {
    this.remarkMasterId = options.remarkMasterId
    console.log(this.remarkMasterId)
    this.getRemarks()
  },
  methods: {
    handlePageChange(val) {
      console.log(val)
      this.pageQuery.pageNum = val.current
      this.getRemarks()
    },
    getRemarks() {
      const data = {
        pageNum: this.pageQuery.pageNum,
        pageSize: this.pageQuery.pageSize,
        currentUserId: this.userInfo.id,
        id: this.remarkMasterId
      }
      getMyRemark(data).then(res => {
        console.log(res)
        if(res.code === 200) {
          this.remarks = res.data.list
          this.totalSize = res.data.total
        } else {
          uni.showToast({
            title: res.message
          });
        }
      })
		},
    // 点赞
    addLikes(item) {
			const data = {
				admirerId: this.userInfo.id,
				commentId: item.id,
				likedId: item.userId
			}
			// 未点赞
			if(item.isAdmired === 0) {
					dianzan(data).then(res => {
							console.log(res)
							if(res.code === 200) {
									item.dianZanNum++
									item.isAdmired = 1
							} else {
									uni.showToast({
											title: res.message,
											icon: 'none'
									})
							}
					})
			// 已点赞
			} else {
					notLike(data).then(res => {
							console.log(res)
							if(res.code === 200) {
									item.dianZanNum--
									item.isAdmired = 0
							} else {
									uni.showToast({
											title: res.message,
											icon: 'none'
									})
							}
					})
			}
    },
    // 评论
    addComments(item) {
      // todo:弹出评论表单+调用接口
      item.comments++
      this.gotoDetail(item.id)
		},
		gotoDetail(id) {
      uni.navigateTo({
        url: '/pages/detail/index?id=' + id
      })
    },
  },
}
</script>

<style lang='scss' scoped>
  page {
    background-color: #f5f5f5;
  }
  .my-remark {
		.footer-box {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			.icon {
				font-size: 12px;
			}
			padding: 0 30px;

		}
		.food-remark {
			display: flex;
			flex-direction: row;
		}
        .no-data {
          height: 100px;
          line-height: 100px;
          width: 100%;
          text-align: center;
          font-size: 14px;
          color: #666666;
        }
  }
  /* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-BAIDU */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url("~@/static/uni.ttf") format("truetype");
	}
</style>
